<template>
  <div class="financial-operation">
    <div class="financial">
      <div class="flex align-center">
        <div class="large-title">财务表现</div>
        <div class="padding-left-10">单位：万元</div>
      </div>
      <div class="fill-box" @click="getDetailFinal">
        <div class="grid-bottom">
          <group-norm-item :isTop="true" :normType="1" title="累计经营活动权责收入" :currentMoney="financial.forecastIncomeTotal" :planMoney="financial.forecastPlanIncomeTotal " :errorPercentage="financial.incomeDeviationRate"></group-norm-item>
        </div>
        <div class="grid-bottom">
          <group-norm-item :isTop="true" :normType="2" title="累计经营活动权责支出" :currentMoney="financial.forecastExpendTotal" :planMoney="financial.forecastPlanExpendTotal " :errorPercentage="financial.expendDeviationRate"></group-norm-item>
        </div>
        <div class="grid-bottom">
          <group-norm-item :isTop="true" :normType="1" title="累计净运营收入" :currentMoney="financial.netIncomeTotal" :planMoney="financial.netPlanIncomeTotal " :errorPercentage="financial.netIncomeDeviationRate"></group-norm-item>
        </div>
      </div>
    </div>
    <div class="operation">
      <div class="large-title">运营表现</div>
      <div class="grid-bottom-right-box" @click="getOperation('payment', '收缴情况')">
        <div class="grid-bottom-right cursor-pointer">
          <div class="right-value">
            <div class="title cursor-pointer">
              <span>欠费金额</span>
              <span v-tooltip="'欠费金额'" class="icon el-icon-question padding-left-5"></span>
            </div>
            <div class="total-price">{{ operation.arrearageAmount | moneyFilterNoUnit }}<span>万元 </span></div>
          </div>
          <div class="right-value">
            <div class="title cursor-pointer">
              <span>账单收缴率</span>
              <span v-tooltip="'账单收缴率'" class="icon el-icon-question padding-left-5"></span>
            </div>
            <div class="total-price">{{ operation.collectionRate | accMul }}<span>%</span></div>
          </div>
          <div class="progress-box">
            <div class="progress-box-item">
              <div class="progress-day">逾期30天以内</div>
              <div class="progress-left">
                <el-progress type="line" color="#3384FE" :text-inside="true" :show-text="false" :stroke-width="16" :percentage="tree" status="success"></el-progress>
              </div>
              <div class="progress-box-text">{{ operation.leArrearageAmount | moneyFilterNoUnit }}万元</div>
            </div>
            <div class="progress-box-item">
              <div class="progress-day">逾期30天～90天</div>
              <div class="progress-left">
                <el-progress type="line" color="#3384FE" :text-inside="true" :show-text="false" :stroke-width="16" :percentage="tnght" status="success"></el-progress>
              </div>
              <div class="progress-box-text">{{ operation.betweenArrearageAmount | moneyFilterNoUnit }}万元</div>
            </div>
            <div class="progress-box-item">
              <div class="progress-day">逾期90天以上</div>
              <div class="progress-left">
                <el-progress type="line" color="#3384FE" :text-inside="true" :show-text="false" :stroke-width="16" :percentage="night" status="success"></el-progress>
              </div>
              <div class="progress-box-text">{{ operation.geArrearageAmount | moneyFilterNoUnit }}万元</div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-bottom-right-box" @click="getOperation('carpetArea', '地毯面积')">
        <div class="grid-bottom-right cursor-pointer">
          <div class="right-value">
            <div class="title cursor-pointer">
              <span>地毯面积</span>
              <span v-tooltip="'地毯面积'" class="icon el-icon-question padding-left-5"></span>
            </div>
            <div class="total-price">{{ operation.carpetArea | areaFilter }}<span>万m²</span></div>
          </div>
          <div class="right-value">
            <div class="title cursor-pointer">
              <span>使用系数</span>
              <span v-tooltip="'使用系数'" class="icon el-icon-question padding-left-5"></span>
            </div>
            <div class="total-price">{{ operation.usageRate | accMul }}<span>%</span></div>
          </div>
          <div class="right-value">
            <div class="title cursor-pointer">
              <span>在租地毯面积</span>
              <span v-tooltip="'在租地毯面积'" class="icon el-icon-question padding-left-5"></span>
            </div>
            <div class="total-price">{{ operation.rentedCarpetArea | areaFilter }}<span>万m²</span></div>
          </div>
          <div class="right-value">
            <div class="title cursor-pointer">
              <span>空间资产出租率</span>
              <span v-tooltip="'空间资产出租率'" class="icon el-icon-question padding-left-5"></span>
            </div>
            <div class="total-price">{{ operation.rentRate | accMul }}<span>%</span></div>
          </div>
        </div>
      </div>
    </div>

    <cash-dialog ref="cashDialog" :selectTime="selectTime" :bizType="bizType" :title="title" page-type="financialManifestation"></cash-dialog>

    <el-dialog :visible.sync="showDialogOperation" width="60%" :close-on-click-modal="false" :close-on-press-escape="false">
      <operationalPerformancePop :selectTime="selectTime" :title="title" :type="type" />
    </el-dialog>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import { performanceFinancial, performanceOperation } from '../api/index';
  import cashDialog from './cashDialog';
  import groupNormItem from './groupNormItem.vue';
  import operationalPerformancePop from './operationalPerformancePop';
  export default {
    props: {
      selectTime: {
        type: String,
        default: dayjs(new Date(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)).format('YYYY-MM'),
      },
    },
    components: { operationalPerformancePop, cashDialog, groupNormItem },
    data() {
      return {
        bizType: [],
        type: '',
        title: '',
        showDialogOperation: false,
        financial: '',
        operation: '',
        tree: 100,
        night: 0,
        tnght: 0,
      };
    },
    watch: {
      selectTime: {
        deep: true,
        immediate: true,
        handler(val) {
          if (val) {
            this.getInfoFinal();
            this.getInfoOpera();
          }
        },
      },
    },
    methods: {
      getOperation(type, name) {
        this.type = type;
        this.title = name;
        this.showDialogOperation = true;
      },
      async getDetailFinal(bizType, name) {
        this.title = '财务表现';
        this.bizType = ['1', '2', '3'];
        await this.$nextTick();
        this.$refs.cashDialog.init();
      },
      //财务表现
      async getInfoFinal() {
        let month = new Date(this.selectTime).getMonth() + 1;
        let res = await performanceFinancial({
          month: month > 9 ? month : '0' + month,
          year: new Date(this.selectTime).getFullYear(),
        });
        this.financial = res;
      },
      //运营表现
      async getInfoOpera() {
        let month = new Date(this.selectTime).getMonth() + 1;
        let res = await performanceOperation({
          month: month > 9 ? month : '0' + month,
          year: new Date(this.selectTime).getFullYear(),
        });
        this.operation = res;
        let max = Math.max(this.operation.leArrearageAmount, this.operation.betweenArrearageAmount, this.operation.geArrearageAmount);
        if (max > 0) {
          this.tree = Math.round((this.operation.leArrearageAmount / max) * 100);
          this.tnght = Math.round((this.operation.betweenArrearageAmount / max) * 100);
          this.night = Math.round((this.operation.geArrearageAmount / max) * 100);
        }
      },
      goDictionary(name) {
        let url = '/businessAssets/dataDic/index?token=1BECA34141E04A338B570F70C780C955&menuId=caa9147d6ba64e1a95bd3eeb76cc5203&parentMenuId=7ee2400d0e72437aa3bdb5823497537f&timestamp=1667202507216&keyWord=' + name;
        window.open(url);
      },
    },
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-dialog {
    width: fit-content !important;
    max-width: 90%;
    min-width: 640px;
  }
  ::v-deep .el-dialog__header {
    background: #fff;
  }
  ::v-deep .el-dialog .el-dialog__header .el-dialog__close {
    color: #666;
  }
  ::v-deep .el-progress-bar__outer {
    border-radius: 0;
    background-color: #fff;
  }
  ::v-deep .el-progress-bar__inner {
    border-radius: 0;
  }
  .financial-operation {
    display: flex;
    justify-content: flex-start;
    background: #f8f8f8;
    margin-top: 20px;
    .financial {
      width: 30%;
      background: #fff;
      padding: 20px 20px 0 20px;
      .fill-box {
        padding: 0 10px;
        overflow: hidden;
        margin-top: 15px;
      }
      .fill-box:hover {
        box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.15);
      }
      .large-title {
        color: #333;
        font-size: 18px;
        font-weight: 500;
        font-family: PingFangSC-Medium, PingFang SC;
      }
      .grid-bottom:last-child {
        border-bottom: none;
      }
      .grid-bottom {
        display: flex;
        justify-content: center;
        flex-direction: column;
        border-bottom: 1px solid #e5e5e5;
        height: 140px;
        .grid-bottom-left {
          .title {
            text-align: center;
            font-size: 14px;
            color: #666;
            padding-left: 6px;
          }
          .total-price {
            color: #333333;
            font-size: 26px;
            text-align: center;
            font-weight: bold;
            padding: 15px 0;
          }
          .plan-item {
            text-align: center;
            font-size: 12px;
            color: #666;
            .first {
              padding-right: 20px;
            }
            .blue {
              color: #29c37f;
            }
            .red {
              color: #eb5757;
            }
          }
        }
      }
    }
    .operation {
      margin-left: 1%;
      width: 70%;
      background: #fff;
      padding: 20px 20px 0 20px;
      .large-title {
        color: #333;
        font-size: 18px;
        font-weight: 500;
        font-family: PingFangSC-Medium, PingFang SC;
      }
      .grid-bottom-right-box:last-child {
        border-bottom: none;
      }
      .grid-bottom-right-box {
        display: flex;
        justify-content: center;
        flex-direction: column;
        border-bottom: 1px solid #e5e5e5;
        height: 210px;
        .grid-bottom-right {
          display: flex;
          justify-content: space-around;
          width: 100%;
          padding: 20px;
          margin: 0 auto;
          height: 140px;
          .right-value {
            display: flex;
            justify-content: center;
            flex-direction: column;
            width: 25%;
            .title {
              text-align: center;
              font-size: 14px;
              color: #666;
            }
            .total-price {
              color: #333333;
              font-size: 26px;
              text-align: center;
              font-weight: bold;
              padding: 15px 0 0 0;
              span {
                font-size: 14px;
              }
            }
          }
          .progress-box {
            width: 50%;
            .progress-box-item {
              display: flex;
              justify-content: flex-start;
              .progress-day {
                height: 30px;
                line-height: 30px;
                color: #666;
                margin-left: 20px;
                text-align: right;
                margin-right: 10px;
              }
              @media only screen and (max-width: 1450px) {
                .progress-day {
                  width: 100px;
                  font-size: 12px;
                }
                .progress-left {
                  width: 100px;
                }
              }
              @media only screen and (min-width: 1450px) {
                .progress-day {
                  width: 150px;
                  font-size: 14px;
                }
                .progress-left {
                  width: 200px;
                }
              }
              .progress-left {
                height: 30px;
                line-height: 30px;
                display: flex;
                justify-content: center;
                flex-direction: column;
              }
              .progress-box-text {
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: #666;
                margin-left: 20px;
              }
            }
          }
        }
        .grid-bottom-right:hover {
          box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.15);
        }
      }
    }
  }
</style>
